<template>
	<view class="iconBox flex-center" :style="getIconBoxStyle">
		<i :class="icon" :style="getIconStyle" v-if="getIconStype == 'icon'"></i>
		<!-- <font-awesome-icon :style="getIconStyle" :icon="icon" v-else /> -->
	</view>
</template>

<script>
	import filter from '../../common/js/filter'
	export default {
		data() {
			return {

			}
		},
		props: {
			//图标
			icon: {
				default: 'fa fa-phone'
			},
			//图标颜色
			color: {
				default: 'var(--theme-font-color)'
			},
			//图标背景颜色
			backColor: {
				default: "rgba(0, 0, 0, 0.3)"
			},

			//图标大小
			iconSize: {
				default: '20px'
			},


			iconBoxSize: {
				default: '40px'
			},

			//是否需要背景
			haveBack: {
				default: false
			}
		},
		computed: {
			getIconStype() {
				if (this.icon.startsWith("fa"))
					return 'icon'
				return 'font-awesome'
			},
			getIconStyle() {
				let data = {
					color: this.color,
					fontSize: this.iconSize || '20px',
					'--fontSize': this.iconSize || '20px',
				}

				if (!this.icon.startsWith("fa"))
					return data

				return filter.compatibleStyles(data)
			},
			getIconBoxStyle() {
				let data = {}
				data.background = this.backColor
				data.width = this.iconBoxSize || "40px"
				data.height = this.iconBoxSize || "40px"

				if (!this.haveBack) {
					data.background = 'none'
					data.width = this.iconSize || "20px"
					data.height = this.iconSize || "20px"
				}
					

				return filter.compatibleStyles(data)
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.iconBox {
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.fa {
		text-align: center;
	}
</style>